<template>
  <div class="fullMain">
    <x-header :left-options="{backText: '',showBack: false}" >
      用户注册
    </x-header>
    <div style="height:20px"/>
    <div class="mainbBg">
      <div class="menuHeader">
        <i class="fa fa-chevron-left mT returnIcon" @click="back"></i>
      </div>
      <img :src='headImgUrl'/>
      <span class="weiName">微信号:{{openId}}</span>
      <!--插入验证提示框-->
      <div v-transfer-dom>
        <alert v-model="isShowAlert">{{alertText}}</alert>
      </div>
      <div class="formDiv">
        <!--  -->
        <form @submit.prevent="register" method="post">
          <div class="displayFlex">
            <i class="fa fa-id-card-o fa-fw"></i>
            <x-input v-model="name" placeholder="真实姓名" :show-clear="false"></x-input>
          </div>
          <!-- <div class="displayFlex">
            <i class="fa fa-bank fa-fw"></i>
            <x-input v-model="place" placeholder="单位" :show-clear="false"></x-input>
          </div> -->
          <div class="displayFlex">
            <i class="fa fa-phone fa-fw"></i>
            <x-input v-model="phone" placeholder="手机号码" :show-clear="false"></x-input>
          </div>
          <div class="displayFlex">
            <i class="fa fa-envelope-o fa-fw"></i>
            <x-input v-model="email" placeholder="邮箱" :show-clear="false"></x-input>
          </div>
          <button
            class="affirmBtn specialBtn"
            style="margin-top:30px;" @click="create_Fun">确认注册</button>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import { XHeader, XInput} from 'vux'
import user from 'api/user'
import {mapState} from 'Vuex'
export default {
  name: 'Create',
  data(){
    return{
      isShow:false,
      name: "",
      place: "",
      phone: "",
      email:'',
      alertText: "", // 验证提示框的文本
      isShowAlert: false, // 是否显示验证提示框
    }
  },
  computed:{
    ...mapState({
      openId: state => state.user.openId,
      headImgUrl: state => state.user.headImgUrl
    }),
  },
  methods:{
    back(){
        this.$router.go(-1);
    },
    showAlert(alertText){
      this.isShowAlert = true
      this.alertText = alertText
    },
    closeTip(){
      this.isShowAlert = false
      this.alertText = ''
    },
    judge(){
      if(this.name == ""){
        this.showAlert("请填写【真实姓名】")
        return false
      }
      // else if(this.place == "" || this.place == undefined){
      //   this.showAlert("单位不能为空")
      // }
      else if(this.phone === ''){
        this.showAlert("请填写【手机号】")
        return false
      }
      else if(!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)){
        this.showAlert("【手机号】格式错误")
        return false
      }
      else if(this.email === ''){
        this.showAlert("请填写【邮箱】")
        return false
      }
      else if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(this.email)){
        this.showAlert("【邮箱】格式错误")
        return false
      }else{
        return true
      }
    },
    async create_Fun(){
      // this.judge()
      if(this.judge()){
        const result = await user.postRegister({
          openId: this.openId,
          userDetail:{
            avatar:this.headImgUrl,
            defaultGroupId:0,
            email:this.email,
            name: this.name,
            phone: this.phone,
            place: '',
            studentId:'',
            tutor:'',
          }
        })
        if(result.code===0){
            //如果失败了显示提示
            this.showAlert(result.message)
        }else{
          //this.isShow=true
          this.showAlert('注册成功')
          setTimeout(() => {
            window.location.href = 'http://wsn2019.club/?openid=' + this.openId
            // window.location.href = 'http://localhost:8080/?openid=' + this.openId
          }, 2000)
        }
      }
    },
    register(){

    },
  },
  components: {
    XHeader,
    XInput,
  }
}
</script>
